<template>
  <div class="payment-order">
    <!-- 查询 -->
    <div class="search">
      <!-- 日期选择 -->
      <div class="with-date">
        <span>日期选择</span>
        <a-radio-group defaultValue="a" buttonStyle="solid">
          <a-radio-button value="a">今天</a-radio-button>
          <a-radio-button value="b">昨天</a-radio-button>
          <a-radio-button value="c">近三天</a-radio-button>
          <a-radio-button value="d">近七天</a-radio-button>
          <a-radio-button value="e">自定义</a-radio-button>
        </a-radio-group>
      </div>
      <!-- 订单号 -->
      <div style="margin:15px 0;">
        <span>订单号</span>
        <a-input placeholder="请输入订单号" style="width:250px;" />
      </div>
      <!-- 折叠面板 -->
      <div>
        <a-collapse defaultActiveKey="1" :bordered="false">
          <a-collapse-panel key="1" style="border-bottom:1px solid #EBEEF5">
            <span slot="header">
              <span style="color:#358CF0;">高级筛选</span>
            </span>
            <!-- 支付通道 -->
            <a-row style="margin-bottom:15px;">
              <a-col span='8'>
                <span>支付通道</span>
                <a-radio-group defaultValue="a" buttonStyle="solid">
                  <a-radio-button value="a">全部</a-radio-button>
                  <a-radio-button value="b">支付宝</a-radio-button>
                  <a-radio-button value="c">微信</a-radio-button>
                </a-radio-group>
              </a-col>
              <a-col span='12'>
                <span>所属部门</span>
                <a-select
                  showSearch
                  placeholder="请选择所属角色"
                  optionFilterProp="children"
                  style="width: 200px"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  :filterOption="filterOption"
                >
                  <a-select-option value="jack">Jack</a-select-option>
                  <a-select-option value="lucy">Lucy</a-select-option>
                  <a-select-option value="tom">Tom</a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <!-- 订单类型 -->
            <a-row>
              <a-col span='8'>
                <span>订单类型</span>
                <a-radio-group defaultValue="a" buttonStyle="solid">
                  <a-radio-button value="a">全部</a-radio-button>
                  <a-radio-button value="b">普通支付</a-radio-button>
                  <a-radio-button value="c">预授权</a-radio-button>
                </a-radio-group>
              </a-col>
              <a-col span='12'>
                <span>操作员</span>
                <a-select
                  showSearch
                  placeholder="请选择所属角色"
                  optionFilterProp="children"
                  style="width: 200px"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  :filterOption="filterOption"
                >
                  <a-select-option value="jack">Jack</a-select-option>
                  <a-select-option value="lucy">Lucy</a-select-option>
                  <a-select-option value="tom">Tom</a-select-option>
                </a-select>
              </a-col>
            </a-row>
            <!-- 操作员 -->
            <a-row style="margin:15px 0 20px 0;">
              <a-col span='12'>
                <span>操作员</span>
                <a-select
                  showSearch
                  placeholder="请选择所属角色"
                  optionFilterProp="children"
                  style="width: 200px"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  :filterOption="filterOption"
                >
                  <a-select-option value="jack">Jack</a-select-option>
                  <a-select-option value="lucy">Lucy</a-select-option>
                  <a-select-option value="tom">Tom</a-select-option>
                </a-select>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </div>
      <!-- 搜索按钮组 -->
      <div class="search-group">
        <a-button style="margin-right:15px;">导出当前结果</a-button>
        <a-button type="primary">搜索</a-button>
      </div>
    </div>
    <!-- 表格 -->
    <div style="margin-top:15px;" class="pay-table">
      <!-- 支付表格 -->
      <a-table :columns="columns" :dataSource="data" @click="handle" style="background:#fff;">
        <span slot="status" slot-scope="text">
          <span v-if="text===1">普通支付</span>
          <span v-else>预授权</span>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
  },
  {
  title: '订单号',
  dataIndex: 'name',
  }, 
  {
  title: '支付通道',
  dataIndex: 'department',
  }, 
  {
    title: '订单类型',
    dataIndex: 'department',
  }, 
    {
    title: '订单状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' },
  },
  {
    title: '交易金额',
    dataIndex: 'role',
  },
  {
    title: '所属部门',
    dataIndex: 'phone',
  }, 

  {
    title: '操作员',
    dataIndex: 'origin',
  },
  {
    title: '备注信息',
    dataIndex: 'time',
  },
  {
    title: '订单时间',
    dataIndex: 'time',
  },
  {
    title: '操作',
    dataIndex: 'time',
  }
];

const data = [{
  key: '1',
  id: '1',
  name: 'tk2019091211182955035',
  department:'支付宝',
  role:'超级管理员',
  phone: 13738039143,
  status: 1,
  origin:'网页',
  time: '2019.08.01-19:20:23',
  children: [{
    key: '2',
    // id: '88',
    name: '111111111111111',
    department:'支付宝',
    role:'公司负责人',
    phone: 13738039143,
    status: 0,
    origin:'pos机',
    time: '2019.08.01-19:20:23'
  }]
}, {
  key: '2',
  id: '2',
  name: 'tk2019091211182955035',
  department:'支付宝',
  role:'公司负责人',
  phone: 13738039143,
  status: 0,
  origin:'pos机',
  time: '2019.08.01-19:20:23'
}, {
  key: '3',
  id: '3',
  name: 'tk2019091211182955035',
  department:'支付宝',
  role:'财务主管',
  phone: 13738039143,
  status: 1,
  origin:'网页',
  address: 'Sidney No. 1 Lake Park',
  tags: ['cool', 'teacher'],
  time: '2019.08.01-19:20:23'
}];
export default {
  data() {
    return {
      data,
      columns
    }
  },
  methods: {
    handle() {
      window.window.console.log('hande')
    }
  }
  
}
</script>
<style lang="less" scoped>
.payment-order {
  .fl {
    display:flex
  }
  .pay-table {
     position: relative;
    color: #333333;
    padding: 1px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
    border-radius: 5px;
  }
  .search {
    position: relative;
    color: #333333;
    padding: 20px 20px 40px 20px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    span {
      display: inline-block;
      width: 60px;
      text-align: right;
      margin-right: 15px;
    }
    &-group {
      position: absolute;
      bottom: 60px;
      right: 20px;
    }
  }
}
/deep/ .ant-collapse-header {
  width: 100% !important;
  text-align: center !important;
  position: absolute !important;
  bottom: -40px !important;
}
/deep/ .ant-collapse {
  width: 100% !important;
  position: relative !important;
}
/deep/ .ant-collapse-arrow {
  left:calc(50% - 25px)  !important;
  color: #358CF0 !important;
}
/deep/ .ant-collapse-content-box {
    padding: 0px !important;
}
</style>